<template>
  <div
    class="card"
    @mouseenter="onMouseEnter"
    @mouseleave="onMouseLeave"
    @click="handleClick"
  >
    <div class="name-wrapper">
      <span v-if="project.lock" class="lock-icon">
        <a-icon style="font-size: 16px;" type="lock" />
      </span>
      <span class="project-name">{{
        project.name.length >= 26
          ? project.name.slice(0, 26) + '...'
          : project.name
      }}</span>
    </div>
    <div v-show="showInfo" class="update-time">
      最近更新：<br />
      {{ project.gmtModify.replace('T', ' ') }} <br />
      <span v-if="role === 2">创建者：{{ project.creatorName }} </span>
    </div>
    <!-- 项目 复制/编辑/删除/置顶 操作 icon -->
    <div v-show="showInfo" class="project-card-iconbox">
      <div class="icons" @click="(e) => e.preventDefault()">
        <a-tooltip>
          <template v-if="role === 1" slot="title">
            复制
          </template>
          <template v-else-if="role === 3" slot="title">
            复制到我的项目
          </template>
          <div
            v-if="role === 1 || role === 3"
            class="circle"
            @click.stop="copyProject"
          >
            <a-icon-font type="iconfuzhiziduan" class="little-icon" />
          </div>
        </a-tooltip>
        <router-link :to="`/management/project/${project.id}/details`">
          <a-tooltip>
            <template slot="title">
              编辑
            </template>
            <div v-if="role !== 3" class="circle">
              <a-icon-font type="iconicon-beifen6-copy" class="little-icon" />
            </div>
          </a-tooltip>
        </router-link>
        <!-- <a-dropdown :get-popup-container="triggerNode => triggerNode.parentNode">
          <div class="circle">
            <a-icon-font type="iconicon-beifen6-copy" class="little-icon-edit"/>
          </div>
          <a-menu slot="overlay">
            <a-menu-item>
              <div @click="setProjectInfoVisible">
                <span>编辑信息</span>
              </div>
            </a-menu-item>
            <a-menu-item v-if="project.auth===3">
              <router-link :to="`/management/project/${project.id}/auth`">
                <span>编辑权限</span>
              </router-link>
            </a-menu-item> -->
        <!-- <a-menu-item>
              <span>项目导出</span>
            </a-menu-item> -->
        <!-- </a-menu>
        </a-dropdown> -->
        <a-tooltip>
          <template slot="title">
            删除
          </template>
          <div v-if="role === 1" class="circle" @click.stop="setVisible">
            <a-icon-font type="iconicon-beifen5-copy" class="little-icon" />
          </div>
        </a-tooltip>
        <!-- 置顶 icon -->
        <a-tooltip>
          <template slot="title">
            {{ project.top ? '取消置顶' : '置顶' }}
          </template>
          <div v-if="role === 1" class="circle" @click.stop="setTop">
            <a-icon-font
              :type="project.top ? 'iconzhiding-lan' : 'iconzhiding'"
              :class="{ 'little-icon-top': project.top }"
              class="little-icon"
            />
          </div>
        </a-tooltip>
      </div>
    </div>
    <!-- 置顶状态 -->
    <div
      v-show="!showInfo && project.top && role === 1"
      class="project-card-iconbox"
    >
      <div class="circle">
        <a-icon-font
          type="iconzhiding-lan"
          class="little-icon little-icon-top"
        />
      </div>
    </div>
    <a-modal
      width="350px"
      :visible="modalVisible"
      :closable="false"
      ok-text="确定"
      cancel-text="取消"
      centered
      @ok.stop="deleteProject"
      @cancel.stop="handleCancel"
    >
      <a-icon
        type="question-circle"
        theme="filled"
        :style="{ color: 'orange', margin: '0 10px 0 0' }"
      /><span>确定删除该项目吗？</span>
    </a-modal>
    <a-modal
      title="项目信息"
      :visible="projectInfoVisible"
      ok-text="修改"
      cancel-text="取消"
      centered
      @ok.stop="updateProject"
      @cancel.stop="cancelUpdate"
    >
      <div>
        <a-form-model
          :model="form"
          :rules="project.auth === 1 ? {} : rules"
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-form-model-item label="项目名称" prop="projectName">
            <a-input
              v-if="project.auth !== 1"
              v-model="form.projectName"
              placeholder="请输入"
            />
            <span v-else class="ant-form-text">{{ form.projectName }}</span>
          </a-form-model-item>
          <a-form-model-item label="项目描述">
            <a-textarea
              v-if="project.auth !== 1"
              v-model="form.description"
              placeholder="请输入"
              style="height: 68px;"
            />
            <span v-else class="ant-form-text">{{ form.description }}</span>
          </a-form-model-item>
          <a-form-model-item label="创建人">
            <span class="ant-form-text">{{ form.creatorName }}</span>
          </a-form-model-item>
          <a-form-model-item label="创建时间">
            <span class="ant-form-text">{{ form.gmtCreate }}</span>
          </a-form-model-item>
        </a-form-model>
      </div>
      <template slot="footer">
        <a-button @click="cancelUpdate">取消</a-button>
        <a-button
          v-show="project.auth !== 1"
          type="primary"
          @click="updateProject"
          >修改</a-button
        >
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
/**
 * single project
 * @author Huihua Lu
 */
import { Component, Prop, Vue } from 'vue-property-decorator'
import ProjectStore, { Project } from '@/store/modules/project'
import { message } from 'ant-design-vue'
import moment from 'moment'

@Component({ name: 'ProjectCard' })
export default class ProjectCard extends Vue {
  @Prop() project!: Project
  @Prop() role!: number // 我创建的 - 1， 我参与的 - 2，模板项目 - 3
  @Prop() pageSize!: number

  private projectInfoVisible: boolean = false
  private form = {
    projectName: '',
    description: '',
    creatorName: '',
    gmtCreate: '',
  }
  private rules = {
    projectName: [{ required: true, message: '请输入项目名', trigger: 'blur' }],
  }

  public showInfo = false
  public modalVisible = false

  /* hover时显示项目的上各种button */
  public onMouseEnter(): void {
    this.showInfo = true
  }

  public onMouseLeave(): void {
    this.showInfo = false
  }

  /* 复制项目 */
  public copyProject() {
    this.$emit('copyProject')
  }

  /* 删除项目时弹窗确认 */
  // public setVisible(): void {
  //   // this.modalVisible = true
  //   Modal.confirm({
  //     title:'确定删除该项目么？',
  //     class:'delete-project-modal',
  //     onOk:this.deleteProject,
  //     okText:'确定',
  //     cancelText:'取消',
  //     maskClosable: true
  //   })
  // }
  public setVisible() {
    this.$emit('setVisible')
  }

  // public async deleteProject(): Promise<void> {
  //   this.modalVisible = false
  //   await ProjectStore.deleteProject({projectId:this.project.id, pageSize: this.pageSize, page: 1})
  // }

  public deleteProject() {
    this.$emit('deleteProject')
  }

  /**
   * 置顶
   */
  public setTop() {
    this.$emit('setTop')
  }

  /* 取消删除 */
  public handleCancel(): void {
    this.modalVisible = false
  }

  /* 点击某个项目时将该项目设为activeProject */
  public handleClick(): void {
    //  如果当前项目为 我参与的 / 模板项目 路由
    ProjectStore.setCurrentPath(this.$route.path)
    ProjectStore.setActiveProject(this.project)
  }

  /* 查看项目信息 */
  public async setProjectInfoVisible() {
    const response = await ProjectStore.queryProjectById(
      String(this.project.id)
    )

    this.projectInfoVisible = true
    this.form.projectName = response.name
    this.form.description = response.description
    this.form.creatorName = response.creatorName
    this.form.gmtCreate = moment(response.gmtCreate).format(
      'YYYY-MM-DD hh:mm:ss'
    )
  }

  /* 修改项目信息 */
  public async updateProject() {
    const passData = {
      id: this.project.id,
      name: this.form.projectName,
      description: this.form.description,
    }
    const response = await ProjectStore.updateProjectInfoById(passData)
    if (response.data.code === 100) {
      this.project.name = this.form.projectName
      this.project.description = this.form.description
      message.success('修改成功')
      this.projectInfoVisible = false
    } else {
      message.warning(response.data.message)
    }
  }

  public cancelUpdate(): void {
    this.projectInfoVisible = false
  }
}
</script>

<style lang="less" scoped>
@import '@/constants';

.card {
  background-image: url('../../assets/project-background.png');
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  position: relative;

  &:hover {
    background-color: #f3f4ff;
  }
}

.lock-icon {
  align-self: baseline;
  margin: 2px 2px 0;
}

.project-name {
  word-break: break-all;
}

.update-time {
  color: #5d637e;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 20px;
  position: relative;
  top: 100px;
}

.project-card-iconbox {
  position: absolute;
  right: 0;
  top: 0;
}

.icons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.circle {
  background-color: #a0a6ff;
  border-radius: 12px;
  height: 24px;
  margin: 10px 8px 0 0;
  text-align: center;
  width: 24px;
}

.circle:hover {
  background-color: #6973ff;
}

.little-icon {
  color: #fff;
  font-size: 16px;
  margin-top: 4px;
}

// 置顶 icon
.little-icon-top {
  color: #6973ff;
}

.little-icon-edit {
  font-size: 18px;
  margin-left: 0.5px;
  margin-top: 3px;
}

.modal {
  background: #fff;
  border-radius: 4px;
  height: 168px;
  width: 419px;

  //box-shadow: 0 4px 12px 0 rgba(0,0,0,0.20);
}

.project-info-input {
  margin-top: 14px;
}

li:hover span {
  color: @TEXT_HOVER_COLOR;
}

// 悬浮下拉框样式
.ant-dropdown-menu {
  padding: 0;
}
</style>
